<template>
  <div class="recharge">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">语点交易</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in trade" :key="i">
                <div class="ttop">{{item.title}}</div>
                <div class="tbottom">{{item.user__username}} 售价：{{item.price}}钻石语点</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="xyd-tab">
          <ul class="xyd-tab-container">
            <li :class="tab.value == indexTab.value ? 'xyd-tab-active' : 'xyd-tab-item'" v-for="tab in tabs" @click="changeTab(tab)">
              {{tab.label}}
            </li>
          </ul>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">
            <ul class="trade-head clearfix">
              <li class="h1">充值点数</li>
              <li class="h2">价格</li>
              <li class="h3">赠送</li>
              <li class="h4">操作</li>
            </ul>
          </div>
          <div class="xyd-c-content">
            <ul class="trade-body clearfix">
              <li class="recharge-item clearfix" v-for="item,i in list" :key="i">
                <ul class="clearfix">
                  <li class="b1">{{item.amount}}点</li>
                  <li class="b2">{{item.price}}元</li>
                  <li class="b3">{{item.give}}点</li>
                  <li class="b4"><button class="blue-btn-outline" @click="handleReCharge(item)">充值</button></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getYd, recharge } from 'api/vip'
export default {

  name: 'recharge',
  components: {
    NavBar
  },
  data() {
    return {
      tabs: [
        { label: '充值普通语点', value: 0 },
        { label: '充值钻石语点', value: 1 }
      ], // 0pu1zuan
      indexTab: { label: '充值普通语点', value: 0 },
      listAll: [],
      list: [],
      trade: []
    };
  },
  created() {
    getYd()
    .then(res => {
      console.log(res)
      this.listAll = res.package
      this.trade = res.trade
      this.list = res.package.filter(v => v.yd_type === this.indexTab.value)
    })
    .catch(err => console.log(err))
  },
  methods: {
    changeTab(tab) {
      this.indexTab = tab
      this.list = this.listAll.filter(v => v.yd_type === tab.value)
    },
    handleReCharge(item) {
      recharge({
        pid: item.id
      })
      .then(res => {
        console.log(res)
        if (res.pay_url) {
          location.href = res.pay_url
        } else {
          this.$message({
            message: '支付链接为空',
            type: 'warning'
          })
        }
      })
      .catch(err => {
        console.log(err)
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.recharge{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 12px;
            >li{
              &:last-child{
                border-bottom: 0;
              }
              height: 70px;
              padding: 15px 0;
              border-bottom: 1px solid #e5e6e7;
              .ttop{
                line-height: 20px;
              }
              .tbottom{
                color: #999;
                font-size: 12px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .page-right{
      ul.trade-head{
        width: 100%;
        padding: 0 40px;
        >li{
          float: left;
          text-align: center;
        }
        .h1{width: 219px;}
        .h2{width: 219px;}
        .h3{width: 219px;}
        .h4{width: 219px;}
      }
      ul.trade-body{
        width: 100%;
        padding: 0 40px;
      }
      .recharge-item{
        border-bottom: 1px solid #e5e6e7;
        width: 100%;
        &:last-child{
          border: none;
        }
        >ul{
          >li{
            float: left;
            text-align: center;
            height: 90px;
            line-height: 90px;
          }
          .b1{width: 219px;}
          .b2{width: 219px;color: #999;}
          .b3{width: 219px;color: #999;}
          .b4{
            width: 219px;
            >button{
              width: 60px;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}
</style>